/*每个应用都应该设置这个，否则浏览器里是有这两个属性的默认值的可能会造成不一致的体验*/
* {
    margin: 0;
    padding: 0;
    /*这个自己写的应用里也应该要有，主要是因为css里不是所有的属性都会被子元素继承，只有如字体之类的才会被继承
    ，而position又默认是static比较坑爹所以最好也写上*/
    position: relative;
}

html {
    /*这个最好显式的加上*/
    font-size: 100%;
    /*设置这么多字体是为了防止系统里没有这个字体从而选择另一个类似的字体*/
    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
}

/*html和body以及自定义根元素的with和height也要设置为100%，比如id="app"元素*/

/*大多数桌面浏览器字体大小默认是16px，因此1rem等于16px（不绝对，浏览器可能根据分辨率会改动这个值，这也是为什么设置为
62.5%而不是10px的原因）这样不好换算（不过其实【可以不设置】，用默认的即可，因为不同浏览器的默认像素不一定是16px
，通过设置62.5%用于方便转换其实没有意义，但是px却是要改成rem方便不同分辨率，不同浏览器取得基本一致的效果）

，通过【设置html】的font-size: 62.5%;，然后其他地方设置字体大小时就不要用px了而是用1rem或其他数值rem【比如body设置font-size为1.4rem】
，rem是root-em的意思，即相对于html元素的大小，因为在不同的分标率下px代表的大小是不一致的
，比如同样大小的屏幕低分辨率16px可能显示很大，但是高分辨率下就显示很小【因为一英寸里有更多像素】
不过这个是别人的框架，已经写了大量的px，以后自己写都用rem来代替px
，【同时】也要设置html的font-family为一个值，比如下面的body里的，防止不同的浏览器默认字体不同
，这里html元素的css设置貌似可以用:root来代替
，注意position默认是static，这个属性不清楚什么意思，最好都改成relative或absolute比较好，用于相对兄弟或者父亲节点定位
，当然也可以设置为fixed，表示直接定位于浏览器【比如侧边栏按钮之类的可以用】（如果子元素有absolute，则父元素一定不能用static
，否则将会以父元素的父元素进行相对定位（如果父元素的父元素也是static则还会继续找
，直到找到一个非static的，static是没有定位的意思，所以其实可以考虑在*里添加position: relative;）
，css属性生效是栈原则，即取某个属性的栈内最后一个，而不是覆盖原则，覆盖是以前的没了，而栈是以前的也存在，只不过取最新的
，注意手机浏览器里不支持:hover但支持:focus */
html,
body,
#app,
.wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/*TODO 上面的css要在每个前端里都应该有*/

a {
    text-decoration: none
}

.content-box {
    position: absolute;
    left: 250px;
    right: 0;
    top: 70px;
    bottom: 0;
    padding-bottom: 30px;
    -webkit-transition: left .3s ease-in-out;
    transition: left .3s ease-in-out;
    background: #f0f0f0;
}

.content {
    width: auto;
    height: 100%;
    padding: 10px;
    overflow-y: scroll;
    box-sizing: border-box;
}

.content-collapse {
    left: 65px;
}

.container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.crumbs {
    margin: 10px 0;
}

.el-table th {
    background-color: #f5f7fa !important;
}

.pagination {
    margin: 20px 0;
    text-align: right;
}

.plugins-tips {
    padding: 20px 10px;
    margin-bottom: 20px;
}

.el-button+.el-tooltip {
    margin-left: 10px;
}

.el-table tr:hover {
    background: #f6faff;
}

.mgb20 {
    margin-bottom: 20px;
}

.move-enter-active,
.move-leave-active {
    transition: opacity .5s;
}

.move-enter,
.move-leave {
    opacity: 0;
}

/*BaseForm*/

.form-box {
    width: 600px;
}

.form-box .line {
    text-align: center;
}

.el-time-panel__content::after,
.el-time-panel__content::before {
    margin-top: -7px;
}

.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
    padding-bottom: 0;
}

/*Upload*/

.pure-button {
    width: 150px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
}

.g-core-image-corp-container .info-aside {
    height: 45px;
}

.el-upload--text {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.el-upload--text .el-icon-upload {
    font-size: 67px;
    color: #97a8be;
    margin: 40px 0 16px;
    line-height: 50px;
}

.el-upload--text {
    color: #97a8be;
    font-size: 14px;
    text-align: center;
}

.el-upload--text em {
    font-style: normal;
}

/*VueEditor*/

.ql-container {
    min-height: 400px;
}

.ql-snow .ql-tooltip {
    transform: translateX(118px) translateY(10px) !important;
}

.editor-btn {
    margin-top: 20px;
}

/*markdown*/

.v-note-wrapper .v-note-panel {
    min-height: 500px;
}